<template>
  <div class="page">
    <div>
      <div>
        <div
          class="anchor"
          bga-2
          px-5
          py-5
          d-flex-center
          style="display: inline-flex; border-radius: 30px"
          mx-10
          my-10
        >
          <c-avatar
            class="anchor__avatar"
            :text="live['name']"
            :url="live['avatar']"
            text-tertiary
          ></c-avatar>
          <span
            class="anchor__follow"
            :class="{ 'anchor__follow--isFocus': live['isFocus'] }"
            @click="live['isFocus'] = !live['isFocus']"
            ml-5
            px-5
            py-3
            fz-12
            text-tertiary
            style="border-radius: 30px"
          >
            {{ live["isFocus"] ? "已关注" : "关注" }}
          </span>
        </div>
      </div>
    </div>

    <div class="content" ml-14>
      <div class="good" bor-4 bga-1>
        <c-magazine
          class="good__magazine"
          v-for="(item, index) in live['goods']"
          :key="index"
          bor-6
          :image="item['image']"
        >
          <div class="good__status" text-tertiary>待秒杀</div>
          <div class="good__price" text-tertiary pr-3 bga-7>
            {{ item["price"] }}
          </div>
        </c-magazine>
      </div>

      <video
        class="content__video"
        src="https://cdn.jsdelivr.net/gh/liuxiaodi01/blog-img/test.mp4"
        type="video/mp4"
        loop="loop"
        muted="muted"
        autoplay
      ></video>
    </div>

    <footer class="footer">
      <div class="footer__box" pt-10 px-14 pb-14 d-flex-center>
        <div>
          <img
            class="footer__img"
            src="https://s10.mogucdn.com/mlcdn/c45406/200901_2fib9eb2clidj808d84f5ffaj224e_90x90.gif"
            pr-18
          />
        </div>
        <div>
          <div px-3 py-3 ml-22 bga-3 circle style="display: inline-flex">
            <Icon
              :is="ThumbsUp"
              size="24"
              :colors="['#fff', '#fff']"
              fill="#fff"
            ></Icon>
          </div>
        </div>
      </div>
    </footer>
    <div
      class="close"
      mr-10
      mt-15
      px-3
      pt-3
      bga-2
      circle
      @click="router.push('/css-architecture-mogujie/live')"
    >
      <Icon :is="CloseSmall" size="20" fill="#ffffff" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { getLivesById } from "@/api/live";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CMagazine from "@/components/magazine/Magazine.vue";
import Icon from "@/components/icon/Icon.vue";
import CAvatar from "@/components/avatar/Avatar.vue";
import { ThumbsUp, CloseSmall } from "@icon-park/vue-next";
import  test from '@/views/live/video/test.mp4'
const route = useRoute();
const router = useRouter();
const live = ref({});
onMounted(() => {
  const id = route.query.id || 0;
  getLivesById({ id }).then((res) => {
    live.value = res.data;
    console.log(live.value, "live");
  });
});
</script>
<style scoped lang="scss">
@include b(page) {
  @include position(fixed, top 0 left 0 right 0 bottom 0);
  @include dimensions(100vw, 100vh);
  display: flex;
  flex-direction: column;
}

@include b(anchor) {
  @include e(avatar) {
    & ::v-deep img {
      @include dimensions(30px);
      margin-right: 10px;
    }
  }

  @include e(follow) {
    background-image: linear-gradient(133deg, #ff5777, #ff469f);

    @include m(isFocus) {
      background: #ecbbd3;
    }
  }
}

@include b(content) {
  @include e(video) {
    object-fit: cover;
    @include position(fixed, top 0 left 0 right 0 bottom 0);
    @include dimensions(100vw, 100vh);
    z-index: -1;
  }
}

@include b(good) {
  @include box-center;
  @include dimensions(80px, 70px);

  @include e(magazine) {
    @include dimensions(70px, 60px);
  }

  @include e(status) {
    @include position(absolute, top 0 left 0);
    @include dimensions(42px, 15px);
    @include box-center;
    border-radius: 6px 0/6px 0;
    background-image: linear-gradient(90deg, #aba3fb, #948afb);
  }

  @include e(price) {
    @include position(absolute, bottom 0 left 0);
    border-radius: 0 6px/0 6px;
  }
}

@include b(chat) {
  @include dimensions(550px, 440px);
  overflow-y: scroll;
  @include e(item) {
    width: fit-content;
  }
}

@include b(footer) {
  margin-top: auto;
  @include e(box) {
    justify-content: space-between;
  }

  @include e(img) {
    @include dimensions(40px);
  }
}
@include b(close) {
  @include position(fixed, top 14 right 0);
}
</style>
